<script setup>
  import { ref } from 'vue'
  import { listHistory } from '@/api/dashboard'

  const navList = ref([
    { name: '传播', id: 1 },
    { name: '历史', id: 2 }
  ])

  const query = ref({
    pageNum: 1,
    pageSize: 100
  })
  const history = ref([])
  const getData = () => {
    listHistory(query.value).then(res => {
      history.value = res.rows
    })
  }
  getData()
  setInterval(() => {
    getData()
  }, import.meta.env.VITE_APP_INTERVAL)
  const propagate = ref(null)
  const historys = ref(null)
  const handelClick = id => {
    if (id === 1) {
      propagate.value.open()
    }
    if (id === 2) {
      historys.value.open()
    }
  }
  const classOptions = ref({
    limitMoveNum: 1,
    direction: 1,
    step: 0.2
  })
</script>

<template>
  <Item-Box
    title="茶文化"
    class="right-bottom"
    :navList="navList"
    @click="handelClick"
  >
    <vue3ScrollSeamless
      class="scroll-wrap"
      :classOptions="classOptions"
      :dataList="history"
      @wheel.prevent=""
    >
      <article v-for="item in history">
        <div class="cover">
          <img v-cover="item.cover" />
          <div class="title">{{ item.name }}</div>
        </div>
        <div class="content" v-html="item.brief"></div>
      </article>
    </vue3ScrollSeamless>
  </Item-Box>
  <Propagate ref="propagate"></Propagate>
  <History ref="historys"></History>
</template>

<style lang="scss" scoped>
  .right-bottom {
    height: 388px;
    ::v-deep(.content) {
      height: 100%;
    }
  }

  article {
    padding: 10px 20px;
    display: flex;
  }

  .cover {
    background: url(/src/assets/img/article-img.png) no-repeat;
    width: 170px;
    height: 200px;
    padding: 9px;
    position: relative;

    img {
      position: absolute;
      width: 152px;
      height: 180px;
      object-fit: cover;
    }

    .title {
      position: absolute;
      bottom: 9px;
      left: 9px;
      width: 152px;
      font-size: 16px;
      text-align: center;
      background: linear-gradient(to right, #1689b8, rgba(57, 70, 87, 0.9));
      height: 35px;
      line-height: 31px;
      color: #fff;
      border-top: 2px solid #8dabc5;
    }
  }

  .content {
    color: #91b4ca;
    white-space: wrap;
    flex: 1;
    margin-left: 10px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #bde7ff;
    line-height: 20px;
  }
</style>
